<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>博客首页</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>

	<body>
		<div class="navbar navbar-default" role="navigation">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
					<a class="navbar-brand" href="#">Bootstrap博客</a>
				</div>
				<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-9" aria-expanded="false" style="height: 1px;">
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#" data-toggle="modal" data-target="#myModal">登录</a></li>
						<li><a href="#" data-toggle="modal" data-target="#myModal1">注册</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content loginbox">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">登录</h4>
					</div>
					<form class="form-signin" role="form">
						<input type="email" class="form-control" placeholder="请输入用户名" required autofocus>
						<input type="password" class="form-control" placeholder="请输入密码" required>
						<div class="checkbox">
							<label><input type="checkbox" value="remember-me"> 记住我？</label>
						</div>
						<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
					</form>
				</div>
			</div>
		</div>
		<!--注册-->
		<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content loginbox">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">注册</h4>
					</div>
					<form class="form-signin" role="form">
						<input type="email" class="form-control" placeholder="请输入用户名" required autofocus>
						<input type="password" class="form-control" placeholder="请输入密码" required>
						<input type="password" class="form-control" placeholder="请确认密码" required>
						<div class="checkbox">
							<label><input type="checkbox" value="remember-me"> 记住我？</label>
						</div>
						<button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
					</form>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="col-md-8 col-sm-7 col-xs-12">
				<ul class="clearfix">
					<li class="list clearfix">
						<div class="list-icon col-xs-3">
							<a href="user.html">
								<img src="img/yh1.jpg" /><br>
							</a>
						</div>
						<div class="list-tit col-xs-9">
							<h4><a href="detail.html">【javascript】避免全局查找</a></h4>
							<p>Js性能优化最重要的就是注意全局查找，因为作用域的查找是先找局部作用域在没有找到之后在去上一级作用域查找直到全局作用域，所以全局作用域查找的性能消耗肯定要比本函数局部作用域的消耗大。</p>
							<p class="item">
								<span class="glyphicon glyphicon-th-large"></span><span class="classify">分类:javascript</span>
								<span class="glyphicon glyphicon-time"></span><span class="introduce-time">发布时间：2016-12-28</span>
								<span class="glyphicon glyphicon-heart"></span><span class="read">阅读次数(<span class="read-more">91</span>)</span>
							</p>
						</div>
					</li>
					<li class="list clearfix">
						<div class="list-icon col-xs-3">
							<img src="img/yh2.jpg" />
						</div>
						<div class="list-tit col-xs-9">
							<h4><a href="detail.html">【javascript】总结个人博客经历的这四年…</a></h4>
							<p>typeof 一般用于js的基本数据类型（undefined，number，string，boolean。注意null检测的结构是object）检测，引用类型检测不准确。instanceof用于检测构造函数，一般引用类型数据类型检测可以检测出来，数组一般是用这种检测方式。但如果页面嵌套的比如iframe，这种检测也会出错。</p>
							<p class="item">
								<span class="glyphicon glyphicon-th-large"></span><span class="classify">分类:javascript</span>
								<span class="glyphicon glyphicon-time"></span><span class="introduce-time">发布时间：2016-12-28</span>
								<span class="glyphicon glyphicon-heart"></span><span class="read">阅读次数(<span class="read-more">57</span>)</span>
							</p>
						</div>
					</li>
					<li class="list clearfix">
						<div class="list-icon col-xs-3">
							<img src="img/yh3.jpg" />
						</div>
						<div class="list-tit col-xs-9">
							<h4><a href="detail.html">【javascript】原生ajax详解</a></h4>
							<p> Ajxa局部刷新用于提高用户体验。Ajax技术的核心是XMLHttpRequest对象（简称XHR） XMLHttpRequest对象 XMLHttpRequest对象在ie7及更高版本可以这样申明。 XHR的用法 发送get请求写法是这样： 由于这次请求时同步的，JavaScript代码会等到服务</p>
							<p class="item">
								<span class="glyphicon glyphicon-th-large"></span><span class="classify">分类:javascript</span>
								<span class="glyphicon glyphicon-time"></span><span class="introduce-time">发布时间：2016-12-28</span>
								<span class="glyphicon glyphicon-heart"></span><span class="read">阅读次数(<span class="read-more">29</span>)</span>
							</p>
						</div>
					</li>
					<li class="list clearfix">
						<div class="list-icon col-xs-3">
							<img src="img/yh4.jpg" />
						</div>
						<div class="list-tit col-xs-9">
							<h4><a href="detail.html">【javascript】js离线检测</a></h4>
							<p>检测是否离线，html5为此定义了一个navigator.onLine属性，这个属性为true表示设备能上网，false表示离线，这个属性还有点兼容问题。因此单独使用这个属性不能确定网络是否连通，即便如此，在请求发生错误的情况，检测这个属性仍然是管用的。</p>
							<p class="item">
								<span class="glyphicon glyphicon-th-large"></span><span class="classify">分类:javascript</span>
								<span class="glyphicon glyphicon-time"></span><span class="introduce-time">发布时间：2016-12-28</span>
								<span class="glyphicon glyphicon-heart"></span><span class="read">阅读次数(<span class="read-more">84</span>)</span>
							</p>
						</div>
					</li>
					<li class="list clearfix">
						<div class="list-icon col-xs-3">
							<img src="img/yh5.jpg" />
						</div>
						<div class="list-tit col-xs-9">
							<h4><a href="detail.html">【javascript】call,apply,bind</a></h4>
							<p>JavaScript中，call、apply和bind是Function对象自带的三个方法，都是为了改变函数体内部 this 的指向。apply 、 call 、bind 三者第一个参数都是 this 要指向的对象，也就是想指定的上下文；apply 、 call 、bind 三者都可以利用后续参数传参；bind 是返回对应 函数，便于稍后调用；apply 、call 则是立即调用 。</p>
							<p class="item">
								<span class="glyphicon glyphicon-th-large"></span><span class="classify">分类:javascript</span>
								<span class="glyphicon glyphicon-time"></span><span class="introduce-time">发布时间：2016-12-28</span>
								<span class="glyphicon glyphicon-heart"></span><span class="read">阅读次数(<span class="read-more">188</span>)</span>
							</p>
						</div>
					</li>
				</ul>
			</div>
			<div class="col-md-4 col-sm-5 hidden-xs">
				<ul class="list-group">
					<li class="list-group-item active">阅读排行</li>
					<li class="list-group-item"><a href="">1、图像的数量</a><span class="badge">14</span></li>
					<li class="list-group-item"><a href="">2、免费 Window 空间托管</a><span class="badge">13</span></li>
					<li class="list-group-item"><a href="">3、图像的数量</a><span class="badge">12</span></li>
					<li class="list-group-item"><a href="">4、 支持</a><span class="badge">11</span></li>
					<li class="list-group-item"><a href="">5、每年更新成本</a><span class="badge">10</span></li>
					<li class="list-group-item"><a href="">6、免费 Window 空间托管</a><span class="badge">9</span></li>
					<li class="list-group-item"><a href="">7、图像的数量</a><span class="badge">8</span></li>
					<li class="list-group-item"><a href="">8、支持</a><span class="badge">7</span></li>
				</ul>
			</div>
		</div>
		<script src="js/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>

</html>